<!--仓库数据-->
<template>
  <div class="warehouse_box">
    <!--   查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="仓库名：" prop="warehouseName">
          <el-input
            v-model="searchDate.warehouseName"
            placeholder="请输入仓库名"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库地址：" prop="warehouseAddress">
          <el-input
            v-model="searchDate.warehouseAddress"
            placeholder="请输仓库地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input
            v-model="searchDate.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button plain @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--   新增模块-->
    <div class="add">
      <el-button type="primary" @click="openDialog(1)">新增</el-button>
    </div>

    <!--   数据列表-->
    <div class="warehouse_list">
      <el-table
        :data="showDate"
        :header-cell-style="{
          background: 'rgba(227,189,189,0.53)',
          border: 'none',
          color: '#000',
        }"
        border
        style="width: 100%"
      >
        <el-table-column label="ID" prop="id" width="60"> </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column label="仓库名称" prop="warehouseName">
        </el-table-column>
        <el-table-column label="仓库地址" prop="warehouseAddress">
        </el-table-column>
        <el-table-column label="仓库联系电话" prop="phone"> </el-table-column>
        <el-table-column label="状态" prop="status" width="120">
          <template slot-scope="scope">
            <span class="status">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="绑定管理员" prop="admin" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <span class="operation_update" @click="openDialog(2, scope.row)"
              >编辑</span
            >
            <span
              class="operation_delete"
              @click="deleteWarehouse(scope.$index)"
              >删除</span
            >
            <span class="operation_qurey" @click="queryProduct(0, scope.row)"
              >查看商品</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="list_bottom">
        <div class="list_length">
          共<span>{{ warehouseDate.length }}</span
          >条
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-count="10"
          :page-size="pageSize"
          :page-sizes="[5, 20, 50, 100]"
          :total="warehouseDate.length"
          background
          layout="prev, pager, next,sizes "
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <!--      编辑弹窗-->
      <Dialog
        ref="updateDialog"
        :dialogDate="updata"
        @addList="addList"
        @updateList="updateList"
      ></Dialog>
    </div>
  </div>
</template>
<script>
import Dialog from "./dialog";

export default {
  components: { Dialog },
  data() {
    return {
      rowId: "",
      formLabelWidth: "120px",

      searchDate: {
        warehouseName: "", // 仓库名
        warehouseAddress: "", // 仓库地址
        phone: "", //联系电话
      },
      warehouseDate: [
        {
          id: 1,
          updateTime: "2021-04-16 16:35:38",
          warehouseName: "集美仓库",
          warehouseAddress: "福建省厦门市集美区",
          phone: "14728536944",
          status: "可用",
          admin: "仓管1",
        },
        {
          id: 2,
          updateTime: "2021-04-16 16:35:38",
          warehouseName: "厦门市集美仓库",
          warehouseAddress: "福建省厦门市集美区",
          phone: "14728536944",
          status: "可用",
          admin: "仓管2",
        },
      ],
      updata: {},
      listSearch: [],
      currentPage: 1, // 当前页数
      pageSize: 5, // 没意思的数据个数
      showDate: [], // 显示数据
    };
  },
  mounted() {
    this.showTable();
  },
  methods: {
    // 数据切片分页渲染表格
    showTable() {
      // 加载表格数据,模拟请求到数据
      this.showDate = this.warehouseDate.slice(
        this.pageSize * (this.currentPage - 1),
        this.pageSize * this.currentPage
      );
    },
    //pageSize 改变时触发
    handleSizeChange(val) {
      // .slice((currentPage-1)*pageSize,currentPage*pageSize)
      this.pageSize = val;
      this.showTable();
    },
    // currentPage 改变时会触发的函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showTable();
    },
    // 查询
    onSubmit() {
      this.$message({
        message:
          "仓库名：" +
          this.searchDate.warehouseName +
          "    仓库地址" +
          this.searchDate.warehouseAddress,
        type: "success",
      });
    },
    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },

    // 拉起编辑弹窗，传入数据, type =（1 表示新增，2 表示修改）
    openDialog(type, list = "") {
      // 如果list为空不赋值
      if (list !== "") {
        // 解决弹窗数据改变，表格也随之改变，使用深拷贝 JSON.parse(JSON.stringify(list))
        this.updata = JSON.parse(JSON.stringify(list));
      }
      // 调用子组件的开启
      this.$refs.updateDialog.showDialog(type);
    },

    // 新增数据
    addList(list) {
      // 新增id
      let listDate = JSON.parse(list);
      listDate.id = this.warehouseDate.length + 1;
      // push
      this.warehouseDate.push(listDate);
      // 数据切片分页渲染表格
      this.showTable();
    },

    // 接收弹窗返回的数据，修改原数据
    updateList(list) {
      // 遍历
      this.warehouseDate = this.warehouseDate.map((t) => {
        return t.id === list.id ? list : t;
      });
      // 数据切片分页渲染表格
      this.showTable();
    },

    // 删除仓库数据
    deleteWarehouse(index) {
      this.warehouseDate.splice(index, 1);
      // 数据切片分页渲染表格
      this.showTable();
    },
    // 查看商品
    queryProduct(type, list) {
      // 解决弹窗数据改变，表格也随之改变，使用深拷贝 JSON.parse(JSON.stringify(list))
      this.updata = JSON.parse(JSON.stringify(list));
      // 调用子组件的开启
      this.$refs.updateDialog.showDialog(type);
    },
  },
};
</script>
<style scoped>
.warehouse_box {
  display: flex;
  flex-direction: column;
}

.warehouse_list {
  margin-top: 20px;
}

.operation_delete,
.operation_qurey,
.operation_update {
  cursor: pointer;
}

.operation_qurey,
.operation_update {
  color: #5749ff;
  margin: 0 5px;
}

.operation_delete {
  color: red;
  margin: 0 5px;
}

.list_length > span {
  color: #5749ff;
}

.warehouse_list .list_bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 1.5vh;
}

.status {
  color: #42b983;
  font-weight: 700;
}
</style>
